<template>
  <zm-dialog
    :title="pTitle"
    :visible.sync="value"
    :before-close="dialogClose"
    append-to-body
    :close-on-click-modal="false"
    size="small"
  >
    <el-form ref="form" :model="form" label-width="140px" :rules="Rules">
      <el-form-item :label="typeName" prop="name">
        <el-input
          v-model.trim="form.name"
          oninput="if(value.length>20)value=value.slice(0,20)"
          :placeholder="placeholder"
          class="w250"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <zm-button @click="dialogClose" type="default">返回</zm-button>
      <zm-button @click="submit" type="primary">保存</zm-button>
    </div>
  </zm-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import {updateType, createType} from '@/api/src/customerSet'
export default {
  name: '',
  components: {},
  mixins: [dialogMixin],
  props: {
    setType: {
      type: String,
      default: '4'
    }
  },
  data () {
    return {
      form: {
        name: ''
      },
      Rules: {
        name: { required: true, message: '请填写名称', trigger: 'blur' }
      }
    }
  },
  computed: {
    pTitle () {
      const method = this.obj.id ? '编辑' : '新增'
      return method + this.getTypeName()
    },
    typeName () {
      return this.getTypeName()
    },
    placeholder () {
      return '请输入' + this.typeName + ',不超过20个字'
    }
  },
  created () {
    this.init()
  },

  methods: {
    init () {
      if (this.obj.id) {
        this.form = JSON.parse(JSON.stringify(this.obj))
      }
    },
    getTypeName () {
      return '投诉类型'
    },
    async submit () {
      let _valid = false
      this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) return
      const _api = this.obj.id
        ? updateType
        : createType
      await _api({ type: this.setType, id: this.obj.id, name: this.form.name })
      this.$message.success('操作成功')
      this.$emit('after')
      this.dialogClose()
    }
  }
}
</script>

<style scoped lang="stylus"></style>
